<template>
  <basic-form
    ref="ruleForm"
    v-model="userForm"
    :rules="rules"
    primary-key="userId"
    :label-col="labelCol"
    :query-api="user_queryByIdApi"
    :insert-api="user_insertApi"
    :update-api="user_updateApi"
    :extData="extData"
  >
    <a-row>
      <a-col :xs="24" :xl="18">
        <a-form-model-item
          label="账号"
          prop="userAccount"
          ref="userAccount"
          :hasFeedback="true"
          :extra="userForm.userId?'':'账号新增后不可修改'"
        >
          <a-input
            v-model="userForm.userAccount"
            :disabled="userForm.userId?true:false"
            placeholder="请输入账号"
          />
        </a-form-model-item>

        <a-form-model-item label="姓名" prop="userName" ref="userName" :hasFeedback="true">
          <a-input v-model="userForm.userName" placeholder="请输入姓名" />
        </a-form-model-item>
        <a-form-model-item label="生日" prop="userBrithday" ref="userBrithday" :hasFeedback="true">
          <a-date-picker
            style="width:100%"
            v-model="userForm.userBrithday"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-model-item>
        <a-form-model-item label="性别" prop="userSex">
          <dictionary-select codeItemId="ORG_USER_SEX" v-model="userForm.userSex"></dictionary-select>
        </a-form-model-item>
        <a-form-model-item label="电话" prop="userPhone" ref="userPhone" :hasFeedback="true">
          <a-input v-model="userForm.userPhone" placeholder="请输入电话" />
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="userEmail" ref="userEmail" :hasFeedback="true">
          <a-input v-model="userForm.userEmail" placeholder="请输入邮箱" />
        </a-form-model-item>
        <a-form-model-item label="介绍" prop="introduction">
          <a-input v-model="userForm.introduction" type="textarea" placeholder="自我介绍......" />
        </a-form-model-item>
      </a-col>
      <a-col :xs="24" :xl="6" v-show="userForm.userId">
        <user-avatar :avatar="userForm.userAvatar" @uploadAvatarSuccess="uploadAvatarSuccess"></user-avatar>
      </a-col>
    </a-row>
  </basic-form>
</template>

<script>
import { userRule } from "@/profile/org/user";
import { userUpdate } from "@/api/org/user";
import {
  user_queryByIdApi,
  user_insertApi,
  user_updateApi,
} from "@/api/org/user";
import UserAvatar from "@/views/org/user/component/userAvatar";
export default {
  props: {
    userId: {
      type: String,
    },
    unitId: {
      type: String,
    },
  },
  components: { UserAvatar },
  data() {
    return {
      labelCol: { span: 2 },
      userForm: {
        userId: this.userId,
        userName: null,
        userBrithday: undefined,
        userAvatar: undefined,
      },
      user_queryByIdApi,
      user_insertApi,
      user_updateApi,
      rules: userRule,
      extData: {
        insert: {
          unitId: this.unitId,
        },
      },
    };
  },
  methods: {
    uploadAvatarSuccess(response, file, fileList) {
      this.userForm.userAvatar = response.data.fileId;
      userUpdate(this.userForm).then((response) => {
        this.userForm = response.data.data;
      });
    },
  },
};
</script>